<template>
  <view class="to-checkout" v-if="store.cartTotalPrice">
    <view class="product-quantity" @tap="showCart = true">
      <text>{{ store.cartTotalQuantity }}</text>
      <image src="/static/gouwuche.png" mode="widthFix" />
    </view>
    <view>合计￥{{ store.cartTotalPrice }}</view>
    <button v-if="store.deliveryType === 0" @tap="goPay(0)">去结算</button>
    <button v-else :disabled="store.cartTotalPrice < merchantInfo.initialPrice" @tap="goPay(1)">
      {{ store.cartTotalPrice >= merchantInfo.initialPrice ? "去结算" : `差￥${liftPrice}起送` }}
    </button>
  </view>
  <!-- 遮罩层 -->
  <view class="popup-cart" v-show="showCart" @tap="showCart = false"></view>
  <view class="cart-shadow" v-show="showCart">
    <view class="delete-cart">
      <image src="/static/shanchu.png" mode="widthFix" @tap="deleteAll" />
    </view>
    <view class="item-cart-goods" v-for="(item, index) in store.cartItems" :key="item.attrId">
      <image class="item-goods-img" :src="item.image" mode="aspectFill" />
      <view class="item-goods-speci">
        <text>{{ item.name }}</text>
        <text v-if="item.specs?.length">{{ item.specs.join("/") }}</text>
        <text>￥{{ item.price }}</text>
      </view>
      <view class="select-goods single-goods">
        <image src="/static/jian-goods.png" mode="widthFix" @tap="handleQuantity(index, 0)" />
        <text>{{ item.quantity }}</text>
        <image src="/static/jia-goods.png" mode="widthFix" @tap="handleQuantity(index, 1)" />
      </view>
    </view>
  </view>

  <!-- <view class="close-up-shop" v-if="isRest">店铺已打样 营业时间{{ merchantInfo.businessTime.join("-") }}</view> -->
</template>
<script setup lang="ts">
import { useStore } from "@/store";
import { ref, computed } from "vue";
import Decimal from "decimal.js";
import moment from "moment"
import { onLoad } from "@dcloudio/uni-app";
const store = useStore();
const showCart = ref(false);
const isRest = ref(true);
const merchantInfo = uni.getStorageSync("merchant_info")
const deleteAll = () => {
  store.cartItems = [];
  showCart.value = false;
};
onLoad(() => {
  const start = moment(merchantInfo.businessTime[0], 'HH:mm')
  const end = moment(merchantInfo.businessTime[1], 'HH:mm')
  isRest.value = !moment().isBetween(start, end)
})
const handleQuantity = (index: number, type: number) => {
  const item = store.cartItems[index];
  if (type) {
    item.quantity++;
  } else {
    item.quantity--;
  }
  if (!item.quantity) {
    store.cartItems.splice(index, 1);
  } else {
    item.totalPrice = item.quantity * item.price;
  }
};
const liftPrice = computed(() => new Decimal(merchantInfo.initialPrice).minus(new Decimal(store.cartTotalPrice)))
const goPay = (type: number) => {
  uni.navigateTo({ url: "/pages/pay/index?type=" + type })
}
console.log(store.cartItems);

</script>
<style>
/* 底部购物车 */
.to-checkout {
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

.product-quantity {
  position: relative;
  width: 80rpx;
}

.product-quantity image {
  width: 80rpx;
}

.product-quantity text {
  font-size: 18rpx;
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #8ad842;
}

.checkout-price {
  flex: 1;
  font-size: 35rpx;
  font-weight: bold;
  padding: 0 30rpx;
}

.to-checkout button {
  background-color: #214bd5;
  border-radius: 15rpx;
  color: #ffffff;
  font-size: 35rpx;
  padding: 15rpx 60rpx;
}

/* 弹出购物车 */
.popup-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9;
  display: flex;
  align-items: flex-end;
}

.cart-shadow {
  position: fixed;
  bottom: 110rpx;
  left: 0;
  right: 0;
  background-color: #fefefe;
  width: 100%;
  max-height: 760rpx;
  overflow-y: auto;
  z-index: 99;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.delete-cart {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
}

.delete-cart image {
  width: 36rpx;
}

.item-cart-goods {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.item-goods-img {
  width: 130rpx;
  height: 130rpx;
  border-radius: 10rpx;
}

.item-goods-speci {
  flex: 1;
  padding: 0 15rpx;
  font-size: 28rpx;
}

.item-goods-speci text:nth-child(1) {
  font-weight: bold;
}

.item-goods-speci text:nth-child(2) {
  font-size: 25rpx;
  padding: 10rpx 0;
}

.item-goods-speci text:nth-child(3) {
  font-weight: bold;
}

/* 打烊 */
.close-up-shop {
  background-color: #b8b8b8;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: 110rpx;
  line-height: 110rpx;
  z-index: 999;
}
</style>